<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7_固定定位全屏遮罩</title>
    <style>
     .mask {
         background-color: rgba(0,0,0,.4);
         /* 固定定位以视口(html窗口)为参照物
           紧贴四个边,实现撑满全屏的效果 */
         position: fixed;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
     }
    </style>
</head>
<body>
<div class="mask">
</div>
<div>
    <!--lorem*50-->
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem fuga inventore mollitia nesciunt porro.
        Blanditiis corporis dolorem eius error esse necessitatibus neque, nesciunt non quibusdam sit totam ullam.
        Numquam, sint.
    </div>
    <div>Ab atque autem dolor fugit iste laborum, maiores nesciunt, nisi odio, perspiciatis quasi quidem sed similique
        tempore vel. Distinctio dolore eligendi ex laboriosam modi nihil nostrum officia placeat quisquam vel.
    </div>
    <div>Aspernatur corporis earum facilis magni minima pariatur perspiciatis quae quisquam quo quos. Ad atque
        cupiditate dolorum eaque enim error incidunt iusto, quod reiciendis sapiente suscipit ut vitae voluptates.
        Dignissimos, eius!
    </div>
    <div>Ab asperiores consequatur cum doloremque illum numquam placeat quasi quos. Architecto beatae cum dolor
        doloremque exercitationem harum id minima mollitia nesciunt nisi officiis quaerat, quam quas quo sed! Odit,
        temporibus.
    </div>
    <div>Distinctio doloribus, impedit ipsum itaque quis rem repellat voluptatem. Commodi, soluta ut. Aliquam eos et
        explicabo illum iusto magni nostrum nulla obcaecati, porro quam recusandae, repellendus sapiente suscipit veniam
        vitae!
    </div>
    <div>Aperiam, consequuntur cumque dolores enim esse est eum exercitationem inventore ipsa magnam minima ullam
        veniam. Blanditiis distinctio dolore dolores, enim, eos expedita iure magnam minus nam omnis perspiciatis,
        veniam veritatis.
    </div>
    <div>Ducimus praesentium provident quibusdam! Error esse omnis porro quia ratione totam vel, velit vero. Adipisci
        aliquid assumenda, eveniet explicabo harum inventore ipsa porro quaerat quasi saepe sit suscipit, totam
        voluptates.
    </div>
    <div>Adipisci aliquid aspernatur deserunt exercitationem fuga fugiat labore maxime, minima odio, quam quasi sequi
        soluta unde. Accusamus aspernatur consequatur harum laudantium libero maiores molestiae nisi quam quas quos?
        Accusamus, quibusdam?
    </div>
    <div>Aliquam aut commodi delectus eveniet impedit maiores porro rem sit suscipit, voluptatibus. Accusantium, aliquam
        expedita facere fuga ipsum itaque, minus natus nisi nulla odit omnis pariatur saepe, sunt ut voluptatem.
    </div>
    <div>A, aliquid asperiores autem consequuntur cumque debitis ea eaque ex, exercitationem facere ipsam minus nobis
        nostrum odit officiis optio pariatur perferendis placeat praesentium quae quibusdam rerum ut veniam voluptates
        voluptatum?
    </div>
    <div>Cumque deserunt dignissimos exercitationem illo in incidunt iure libero, magni nihil nisi nobis placeat porro
        quam quasi qui quisquam recusandae rem, saepe vero, voluptates. Commodi dolorum hic itaque quam quibusdam?
    </div>
    <div>Accusamus fuga iure molestias, quidem rerum similique sint veniam vero! Architecto assumenda, at dicta dolore
        dolorum est facere ipsa molestiae necessitatibus nostrum perferendis placeat, porro repellat sunt velit voluptas
        voluptatum!
    </div>
    <div>Accusantium adipisci aperiam debitis dolores eos facere inventore laudantium maxime, mollitia pariatur quod
        ullam. Consectetur deleniti dignissimos dolorum eius est et inventore iste labore, maiores, nam nisi optio, sint
        tempora.
    </div>
    <div>Architecto, aut consectetur consequatur distinctio, eos eum exercitationem facilis harum incidunt libero minus,
        natus nemo possimus quae qui ratione repellat sequi veritatis. Enim ipsam maxime neque obcaecati repudiandae
        saepe tenetur.
    </div>
    <div>Alias, beatae ipsa provident quia quidem similique totam voluptatibus. Adipisci architecto cumque et fuga
        inventore itaque libero minus perferendis perspiciatis quo. Debitis expedita harum laudantium nostrum
        reprehenderit, saepe vel voluptatibus.
    </div>
    <div>Dolore iure maiores minima nemo neque ullam voluptatem! A ad animi, assumenda doloribus earum enim
        exercitationem facere laboriosam libero molestias nam nisi optio pariatur quae quaerat quis quo veritatis
        voluptatem.
    </div>
    <div>Asperiores aspernatur assumenda cum dolor facilis laudantium non numquam quia recusandae sunt. A adipisci amet
        atque consectetur cum debitis deleniti dicta eum, exercitationem hic molestiae officia quia quidem soluta
        tempora.
    </div>
    <div>Consectetur dolore doloribus ducimus ea, ex harum molestiae nesciunt placeat quisquam sequi! Ad beatae facere
        incidunt iste iure, libero minima nostrum nulla quas quidem rem repellendus sed, soluta voluptas, voluptate.
    </div>
    <div>Blanditiis debitis dignissimos distinctio doloribus eaque expedita, hic iusto labore laborum libero, magnam
        magni maiores natus nisi officia pariatur perspiciatis quam quidem quis quod recusandae repudiandae tempora
        ullam ut vitae.
    </div>
    <div>Adipisci aliquam id odit reprehenderit rerum! Atque cumque dolore est eum ex explicabo, fugiat id illum,
        inventore iure labore, libero maiores minus modi neque quos reiciendis rem sapiente similique sunt!
    </div>
    <div>Aliquid delectus expedita necessitatibus numquam provident, rerum tempora! Ad culpa dignissimos, distinctio
        esse et exercitationem id incidunt itaque nam natus nemo obcaecati, officia officiis placeat possimus quae qui,
        quos totam!
    </div>
    <div>Ad aperiam asperiores assumenda autem consequuntur delectus distinctio dolorem eius facere facilis fuga impedit
        ipsum, maxime odit provident quaerat quas quia quisquam quod recusandae repellendus sit sunt tempora ullam
        voluptate?
    </div>
    <div>Amet autem consequuntur cum dignissimos, dolorum eaque, eveniet fuga molestiae nemo non officiis sequi
        temporibus! Aliquam aliquid, assumenda at debitis dolore enim esse impedit repellendus, repudiandae, ut voluptas
        voluptate voluptatibus?
    </div>
    <div>Beatae cumque delectus harum illo ipsum nisi nobis, obcaecati officiis optio porro quos veniam vero voluptate?
        Accusamus amet aut beatae cum, cumque ea expedita illo, incidunt itaque placeat quibusdam tempore.
    </div>
    <div>Alias aliquam debitis ipsa molestias quas quis, quisquam tempore vitae. Asperiores consequuntur distinctio
        dolores doloribus esse explicabo, itaque, labore minus nostrum odio omnis quia quod sapiente sed sunt unde
        voluptatem!
    </div>
    <div>Blanditiis culpa earum eius modi nemo? At corporis ea eaque fugit hic, non pariatur quam quod reprehenderit
        soluta. Deserunt dignissimos eum id laborum nostrum officiis quae rerum sit soluta, ullam?
    </div>
    <div>Adipisci alias autem deleniti ducimus illum perspiciatis sequi, sint. Ab aperiam blanditiis consequatur
        deserunt enim ex harum illo in inventore modi molestias nam nobis odio pariatur, rerum sapiente voluptatibus.
        Cum.
    </div>
    <div>Accusantium adipisci consequuntur distinctio dolores dolorum ea eius est eveniet expedita facilis fugit, id
        ipsum itaque iure laboriosam maiores nihil nisi non possimus, quam repudiandae sint tempore ut voluptatem
        voluptatibus.
    </div>
    <div>Architecto aspernatur beatae hic iusto laboriosam neque nisi porro unde. Animi at, beatae consequatur, eligendi
        eos exercitationem expedita fuga inventore magnam natus officiis omnis possimus, quam reiciendis sapiente
        tenetur voluptate.
    </div>
    <div>Animi dignissimos eum facere impedit numquam porro quas qui sit sunt suscipit. Aliquid asperiores cumque dolore
        dolores, earum ex fugiat fugit illo natus, nemo perspiciatis similique sunt temporibus vero voluptates.
    </div>
    <div>Accusantium, architecto consequuntur earum enim eum excepturi incidunt iste molestiae nobis porro, quo
        repudiandae ut, vero? Accusamus architecto consequatur dolor est libero nisi repellat saepe. Aliquam amet iusto
        mollitia nisi.
    </div>
    <div>Ab dignissimos earum eum ipsam ipsum non, obcaecati quod sint sunt! Consequuntur distinctio error nemo officia
        optio temporibus totam voluptates. A aperiam deleniti eius perspiciatis quaerat temporibus. Expedita minus,
        nemo.
    </div>
    <div>Aliquam et laudantium odit sed temporibus? Ab alias, ducimus harum hic incidunt totam. Blanditiis deleniti
        dicta dignissimos, eveniet harum impedit, ipsum iste, magni maiores officia sequi ut velit voluptas
        voluptatibus?
    </div>
    <div>Aperiam architecto atque beatae commodi impedit iste libero nulla quo saepe. Consequatur dolorem earum itaque
        laboriosam magni maiores minus nostrum numquam quisquam rerum. Ad, alias at cupiditate debitis in laboriosam!
    </div>
    <div>Atque fugiat praesentium reiciendis rem. Atque, autem consequatur dolorem ducimus eaque laboriosam laudantium
        non obcaecati odit quo repellat, soluta vitae? Error provident ratione repellat sed ullam. Aliquid impedit quis
        voluptatibus?
    </div>
    <div>Aut enim est illo in libero nisi nulla, provident quam quasi reiciendis repellat saepe, suscipit tempora. Culpa
        esse excepturi, facilis fugiat in modi, neque optio porro praesentium, repudiandae saepe voluptas?
    </div>
    <div>Adipisci aliquam at blanditiis consectetur distinctio, doloribus ducimus ea eos error esse ex exercitationem
        expedita explicabo hic illum minus mollitia nobis obcaecati possimus quia quibusdam ratione soluta vel veritatis
        voluptates.
    </div>
    <div>Amet commodi corporis minima molestias, necessitatibus nesciunt, officiis quisquam quo repellat unde veniam
        veritatis. Eaque eligendi exercitationem laudantium officiis. A dolore dolorem doloremque dolorum eligendi nulla
        odit praesentium ullam vero!
    </div>
    <div>Aliquam aut cum eaque eius, fuga fugiat, illo incidunt ipsum labore maiores molestias nam, omnis sequi
        similique sint soluta sunt? Delectus deleniti dolores ipsa tenetur. Iste magni numquam praesentium voluptates!
    </div>
    <div>Animi dolorum eveniet quia quos ratione. Earum natus, totam. Deserunt, doloribus hic laudantium libero
        molestiae mollitia pariatur praesentium, provident quo repudiandae sunt voluptatum! Aliquam atque dicta hic
        molestiae nemo quam.
    </div>
    <div>Commodi consequuntur doloremque enim, eum facilis id inventore iusto, nesciunt perspiciatis praesentium quidem
        quisquam quos sit tempora tempore totam voluptatem? Accusantium beatae esse expedita explicabo natus nobis non
        totam voluptate.
    </div>
    <div>Aliquid aperiam aspernatur autem blanditiis cumque dolorum ea eligendi enim eum eveniet expedita facere in iste
        iusto laborum magnam odio perferendis quaerat qui quis, quo sed sint tempore ut vitae!
    </div>
    <div>Aperiam aut doloremque, eum hic ipsam iste laboriosam laudantium molestiae nostrum quos, rem, sed sint.
        Assumenda dolores, earum. Aliquam architecto assumenda cupiditate dolor doloribus, ex in incidunt magni maiores
        molestias.
    </div>
    <div>A accusamus beatae, consectetur delectus dolorem ducimus eaque earum eos explicabo facilis laudantium maiores
        maxime natus necessitatibus nostrum nulla quaerat sed similique. Doloribus eligendi facilis, nisi non sint
        ullam! Inventore.
    </div>
    <div>Accusamus accusantium aliquid, animi beatae cumque ex expedita ipsam minima modi nisi nostrum obcaecati odio
        perferendis, quam, quasi qui quibusdam quo rerum sint tempore temporibus ullam veniam? Ad natus, tempora?
    </div>
    <div>A animi architecto consectetur culpa cumque dolorem doloremque ea error excepturi, expedita harum illo ipsam
        iste iure obcaecati odio quisquam ratione, repudiandae, temporibus velit veritatis voluptas voluptatem.
        Dignissimos, quaerat sequi?
    </div>
    <div>Consectetur corporis dolore, est itaque obcaecati quis. Ab, aspernatur commodi doloremque ea eveniet expedita,
        minima nesciunt, nihil nisi nostrum numquam quibusdam sed tempora. Alias animi libero minus quia sapiente
        suscipit?
    </div>
    <div>At blanditiis consectetur cum cupiditate dignissimos ea enim, est eum explicabo ipsam iusto laboriosam, maxime
        minima modi nesciunt odio odit omnis optio porro quam qui quos reiciendis sit suscipit temporibus?
    </div>
    <div>Adipisci asperiores at cumque cupiditate, eligendi enim expedita fugit libero nam nihil non odio perferendis
        quasi quibusdam quod rerum sapiente similique ut velit veritatis! Cumque ea inventore minima rem sed?
    </div>
    <div>Beatae, cupiditate enim eos magnam sit sunt ullam vero voluptatibus. In mollitia officiis optio placeat
        provident repudiandae? Fugit odio, totam. Accusamus ad atque aut est explicabo id ipsam iusto obcaecati.
    </div>
</div>
</body>
</html>